<template>
  <div class="son-frame-container">
    <div class="son-frame-nav-title">
      子页面标题
    </div>
    <img class="son-frame-nav" src="../../assets/main/导航.png" alt="顶部导航" />
    <img class="son-frame-border" src="../../assets/main/frameBg.png" alt="边框" />
    <div class="son-frame-content">
      <!-- 这里放置页面主要内容 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  document.body.classList.remove('login-page');
})

// 组件逻辑
</script>

<style scoped>
.son-frame-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url(../../assets/main/BG.png) no-repeat center center;
  background-size: cover;
}

.son-frame-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.son-frame-nav-title {
  position: absolute;
  top: -20px;
  left: 40px;
  width: auto;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 4;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  text-shadow: 0 2px 8px #003366, 0 0 16px #00aaff;
  letter-spacing: 6px;
  pointer-events: none;
  user-select: none;
}

.son-frame-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.son-frame-content {
  position: relative;
  z-index: 3;
  width: calc(100% - 80px);
  height: calc(100% - 120px);
  margin: 60px 40px;
  padding: 20px;
  background: rgba(0, 51, 102, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 170, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 170, 255, 0.1);
  overflow: auto;
}

/* 自定义滚动条样式 */
.son-frame-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.son-frame-content::-webkit-scrollbar-track {
  background: rgba(0, 51, 102, 0.1);
  border-radius: 3px;
}

.son-frame-content::-webkit-scrollbar-thumb {
  background: rgba(0, 170, 255, 0.3);
  border-radius: 3px;
}

.son-frame-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 170, 255, 0.5);
}
</style>

<style>
/* 隐藏全局背景图 */
body::before {
  display: none !important;
}

/* 优化Son页面背景图和滚动条 */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

body {
  background: url(../../assets/main/背景.png) no-repeat center center;
  background-size: cover;
}
</style>
